<template>
  <div class="course-selection-view">
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title"><i class="el-icon-edit"></i>选课管理</h1>
        <p class="page-description">管理学生的选课信息</p>
      </div>
      <div class="header-right"><el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增选课</el-button></div>
    </div>
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="学生名"><el-input v-model="searchForm.studentName" placeholder="请输入学生名" clearable /></el-form-item>
        <el-form-item label="课程名"><el-input v-model="searchForm.courseName" placeholder="请输入课程名" clearable /></el-form-item>
        <el-form-item label="班级名"><el-input v-model="searchForm.className" placeholder="请输入班级名" clearable /></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table :data="tableData" style="width:100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="studentName" label="学生姓名" />
        <el-table-column prop="studentNumber" label="学号" />
        <el-table-column prop="className" label="班级" />
        <el-table-column prop="courseName" label="课程名" />
        <el-table-column prop="teacherName" label="授课教师" />
        <el-table-column prop="dailyScore" label="日常得分" width="100"><template slot-scope="scope">{{ scope.row.dailyScore || '-' }}</template></el-table-column>
        <el-table-column prop="examScore" label="考试得分" width="100"><template slot-scope="scope">{{ scope.row.examScore || '-' }}</template></el-table-column>
        <el-table-column prop="score" label="总得分" width="100"><template slot-scope="scope">{{ scope.row.score || '-' }}</template></el-table-column>
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" class="action-btn edit-btn">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" class="action-btn delete-btn">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="学生" prop="studentId"><el-select v-model="form.studentId" placeholder="请选择学生" filterable><el-option v-for="item in studentOptions" :key="item.id" :label="item.name + (item.number ? '（' + item.number + '）' : '')" :value="item.id" /></el-select></el-form-item>
        <el-form-item label="课程" prop="courseId"><el-select v-model="form.courseId" placeholder="请选择课程" filterable><el-option v-for="item in courseOptions" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
        <el-form-item label="日常得分" prop="dailyScore"><el-input-number v-model="form.dailyScore" :min="0" :max="100" /></el-form-item>
        <el-form-item label="考试得分" prop="examScore"><el-input-number v-model="form.examScore" :min="0" :max="100" /></el-form-item>
        <el-form-item label="总得分" prop="score"><el-input-number v-model="form.score" :min="0" :max="100" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer"><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" @click="handleSubmit">确定</el-button></div>
    </el-dialog>
  </div>
</template>
<script>
import { getSelectionPage, getSelectionPageCount, saveSelection, deleteSelection, getSelectionById, getStudentNames, getCourseNames, getStudentById, getCourseById, getClassById, getMajorById, getDepartmentById, getTeacherById } from '@/api'
export default { name:'CourseSelectionView', data(){return{ searchForm:{ studentName:'', courseName:'', className:'' }, tableData:[], studentOptions:[], courseOptions:[], currentPage:1, pageSize:10, total:0, dialogVisible:false, dialogTitle:'添加选课', form:{ id:-1, studentId:'', courseId:'', dailyScore:null, examScore:null, score:null }, rules:{ studentId:[{ required:true, message:'请选择学生', trigger:'change'}], courseId:[{ required:true, message:'请选择课程', trigger:'change'}] } }}, mounted(){ this.loadData(); this.loadStudents(); this.loadCourses(); }, methods:{ async loadData(){ try{ const countRes = await getSelectionPageCount(this.searchForm); this.total = countRes.data * this.pageSize; const res = await getSelectionPage(this.currentPage, this.searchForm); this.tableData = res.data || [] } catch(e){ this.$message.error('加载数据失败') } }, async loadStudents(){ try{ const res = await getStudentNames(); this.studentOptions = res.data || [] } catch(e){} }, async loadCourses(){ try{ const res = await getCourseNames(); this.courseOptions = res.data || [] } catch(e){} }, handleSearch(){ this.currentPage=1; this.loadData() }, resetSearch(){ this.searchForm={ studentName:'', courseName:'', className:'' }; this.handleSearch() }, showAddDialog(){ this.dialogTitle='添加选课'; this.form={ id:-1, studentId:'', courseId:'', dailyScore:null, examScore:null, score:null }; this.dialogVisible=true }, async handleEdit(row){ try{ const res = await getSelectionById(row.id); this.dialogTitle='编辑选课'; this.form={ ...res.data }; this.dialogVisible=true } catch(e){ this.$message.error('获取选课信息失败') } }, handleDelete(row){ this.$confirm('确定删除该选课记录吗?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(async()=>{ try{ await deleteSelection(row.id); this.$message.success('删除成功'); this.loadData() }catch(e){ this.$message.error('删除失败') } }) }, async handleSubmit(){ this.$refs.form.validate(async valid=>{ if(!valid) return; const sid = this.form.studentId; const cid = this.form.courseId; if(!sid || !cid){ this.$message.error('请先选择学生和课程'); return } let studentDeptName = '', courseDeptName = ''; try { const stuRes = await getStudentById(sid); const stu = stuRes.data||{}; if(stu.classId){ const classRes = await getClassById(stu.classId); const cls = classRes.data||{}; if(cls.departmentId){ const deptRes = await getDepartmentById(cls.departmentId); studentDeptName = deptRes.data?.name || '' } else if(cls.majorId){ const majorRes = await getMajorById(cls.majorId); const major = majorRes.data||{}; if(major.departmentId){ const deptRes = await getDepartmentById(major.departmentId); studentDeptName = deptRes.data?.name || '' } } } const courseRes = await getCourseById(cid); const course = courseRes.data||{}; if(course.departmentId){ const deptRes = await getDepartmentById(course.departmentId); courseDeptName = deptRes.data?.name || '' } else if(course.teacherId){ const teacherRes = await getTeacherById(course.teacherId); const teacher = teacherRes.data||{}; if(teacher.departmentId){ const deptRes = await getDepartmentById(teacher.departmentId); courseDeptName = deptRes.data?.name || '' } } } catch(e){} if(studentDeptName && courseDeptName && studentDeptName !== courseDeptName){ this.$alert(`该课程所属系：${courseDeptName}，学生所属系：${studentDeptName}，请重新选择。`,'系别不一致',{ type:'warning'}); return } try{ await saveSelection(this.form); this.$message.success(this.form.id===-1?'添加成功':'编辑成功'); this.dialogVisible=false; this.loadData() }catch(e){ this.$message.error(this.form.id===-1?'添加失败':'编辑失败') } }) }, handleSizeChange(val){ this.pageSize=val; this.loadData() }, handleCurrentChange(val){ this.currentPage=val; this.loadData() } } }
</script>
<style scoped>
.course-selection-view{ padding:24px; min-height:calc(100vh - 120px); background:#f5f6fa; }
.page-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; background:white; padding:24px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); border:1px solid #e8e9ea; }
.header-left{ flex:1; }
.page-title{ margin:0 0 8px 0; font-size:28px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; }
.page-title i{ margin-right:12px; color:#409eff; font-size:32px; }
.page-description{ margin:0; color:#6c757d; font-size:15px; font-weight:400; }
.header-right{ display:flex; align-items:center; }
.search-card{ margin-bottom:20px; }
.table-card{ margin-bottom:20px; }
.el-pagination{ margin-top:20px; text-align:right; }
.action-buttons{ display:flex; gap:8px; justify-content:center; align-items:center; }
:deep(.action-btn){ width:60px!important; height:28px!important; padding:0!important; border-radius:4px!important; font-size:12px!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:60px!important; }
:deep(.edit-btn){ background-color:#409eff!important; border-color:#409eff!important; color:white!important; }
:deep(.edit-btn:hover){ background-color:#66b1ff!important; border-color:#66b1ff!important; }
:deep(.delete-btn){ background-color:#f56c6c!important; border-color:#f56c6c!important; color:white!important; }
:deep(.delete-btn:hover){ background-color:#f78989!important; border-color:#f78989!important; }
</style>
